<template>
  <a-spin :spinning="confirmLoading" style="height:100%;">
    <a-upload-dragger
      :multiple="false"
      :accept="accept"
      :fileList="fileListData"
      :remove="handleRemove"
      :beforeUpload="beforeUpload"
    >
      <p class="ant-upload-drag-icon">
        <a-icon type="inbox" />
      </p>
      <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
      <p style="color: #b1b1b1">支持上传附件的扩展名：.rar .zip .doc .docx .pdf .jpg等</p>
    </a-upload-dragger>
    <div>
      <a-radio-group v-model="value" @change="onChange">
        <a-radio :value="1">
          预案流程
        </a-radio>
        <a-radio :value="2">
          预案措施
        </a-radio>
      </a-radio-group>
      <!-- <a-button class="back" size="small" @click="handleCancel"> 取消 </a-button> -->
      <!--      <a-button class="submit" size="small" type="primary" @click="handleOk"> 开始导入 </a-button>-->
    </div>

  </a-spin>
</template>

<script>
// import { importExcel, exportWpTemplate } from '@/api/alarm.js'
import { updatas } from '@/api/xlgc/lawCase'
export default {
  // props: {
  //   parentarr: {
  //     type: Array,
  //     default() {
  //       return []
  //     },
  //   },
  //   modalType: {
  //     type: String,
  //     default: '',
  //   },
  // },
  data() {
    return {
      value: undefined,
      title: '',
      width: 800,
      disableSubmit: false,
      result: {},
      confirmLoading: false,
      fileListData: [],
      accept: '', // 导入的文件格式
      src: '',
      name: '',
      objTypes: {
        url: undefined,
        type: undefined,
        group: undefined,
        name: undefined
      }

    }
  },
  created() {},
  computed: {
    isDisabled() {
      return !(this.fileListData.length > 0)
    }
  },
  methods: {
    onChange(e) {
      // console.log('radio checked', e.target.value);
      // this.$emit('group',e.target.value)
      this.objTypes.group = e.target.value
    },
    close() {
      this.$emit('close')
    },
    handleOk() {
      const { fileListData } = this
      if (fileListData && fileListData.length === 0) {
        this.$message.error('请选择导入文件')
        return
      }
      const formData = new FormData()
      fileListData.forEach(file => {
        formData.append('file', file)
      })
      this.confirmLoading = true
      updatas(formData)
        .then(res => {
          console.log(res)
          if (res.success) {
            console.log(res)
            this.fileListData = []
            this.confirmLoading = false
            this.showConfirm(res.message)
            this.src = res.message
            this.$message.success('上传成功', 2)
          } else {
            this.confirmLoading = false
            this.$message.error(res.message)
          }
        })
        .catch(e => {
          this.confirmLoading = false
          this.$message.error('导入出错了')
        })
    },
    showConfirm(result) {
      this.objTypes.url = result
      this.$emit('importData', this.objTypes)
      this.$emit('title',this.name)
    },
    handleCancel() {
      this.fileListData = []
      // this.close()
    },
    // 上传前拦截
    beforeUpload(file) {
      console.log(file)
      this.name = file.name
      this.fileListData = [file] // [...this.fileListData, file];
      console.log(this.fileListData[0].type)
      let Str = this.fileListData[0].type
      let arrStr = Str.split('/')
      console.log(arrStr[0])
      if (arrStr[0] == 'image') {
        // this.$emit('type',1)
        this.objTypes.type = 1
      } else if (arrStr[0] == 'video') {
        // this.$emit('type',2)
        this.objTypes.type = 2
      } else {
        // this.$emit('type',3)
        this.objTypes.type = 3
      }
      return false
    },
    // 移除
    handleRemove(file) {
      const index = this.fileListData.indexOf(file)
      const newFileList = this.fileListData.slice()
      newFileList.splice(index, 1)
      this.fileListData = newFileList
    },
    downLoadMix(res, fileName) {
      let blob = new Blob([res]) // res为从后台返回的数据
      if (!fileName) {
        fileName = res.headers['content-disposition'].split('filename=').pop()
      }
      if ('msSaveOrOpenBlob' in navigator) {
        window.navigator.msSaveOrOpenBlob(blob, fileName)
      } else {
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      }
    }
  },
  watch: {
    src: {
      deep: true,
      handler(a, b) {
        this.$emit('inputse', this.objTypes)
      }
    }
  }
}
</script>

<style scoped lang="less">
/deep/.ant-spin-container {
  height: 100%;
  .ant-upload.ant-upload-drag {
    height: 85%;
  }
}
/deep/.ant-upload-matter {
  position: absolute;
  bottom: 84px;
  right: 5px;
  padding: 30px 0 0;
  p {
    margin-bottom: 0;
    font-size: 12px;
  }
}
.footer-model {
  position: absolute;
  bottom: 84px;
  left: 10px;
}
.importBox {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 100;
  // .submit {
  //   margin-left: 10px;
  // }
}
</style>
